<!doctype html>
<html lang="en">
<head>
    <title>Accordion - Animation</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijutil.css" rel="stylesheet" />
    <link type="text/css" href="../../themes/wijmo/jquery.wijmo.wijaccordion.css" rel="stylesheet" />
    <script src="../../wijmo/jquery.wijmo.wijutil.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijaccordion.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#accordion").wijaccordion({
                animated: "easeInOutCirc", duration: 700,
                header: "h3"
            });
            $("#accordion2").wijaccordion({
                animated: false,
                header: "h3"
            });

            $("#accordion3").wijaccordion({
                animated: "custom1",
                header: "h3"
            });

            jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
                this.slide(options, {
                    easing: options.down ? "easeOutBounce" : "swing",
                    duration: options.down ? 1000 : 200
                });
            }
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Animation</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h3>
                Animation with Easing</h3>
            <div id="accordion">
                <div>
                    <h3>
                        <a href="#">First</a></h3>
                    <div>
                        <p>
                            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
                            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
                            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
                            Vestibulum a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Second</a></h3>
                    <div>
                        <p>
                            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
                            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
                            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Third</a></h3>
                    <div>
                        <p>
                            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
                            pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque
                            semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
                            nisi, eu iaculis leo purus venenatis dui.
                        </p>
                    </div>
                </div>
            </div>
            <h3>
                Animation Disabled</h3>
            <div id="accordion2" class="ui-helper-clearfix">
                <div>
                    <h3>
                        <a href="#">First</a></h3>
                    <div>
                        <p>
                            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
                            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
                            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
                            Vestibulum a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Second</a></h3>
                    <div>
                        <p>
                            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
                            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
                            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Third</a></h3>
                    <div>
                        <p>
                            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
                            pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque
                            semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
                            nisi, eu iaculis leo purus venenatis dui.
                        </p>
                    </div>
                </div>
            </div>
            <h3>
                Custom Animation</h3>
            <div id="accordion3" class="ui-helper-clearfix">
                <div>
                    <h3>
                        <a href="#">First</a></h3>
                    <div>
                        <p>
                            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
                            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
                            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
                            Vestibulum a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Second</a></h3>
                    <div>
                        <p>
                            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
                            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
                            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
                        </p>
                    </div>
                </div>
                <div>
                    <h3>
                        <a href="#">Third</a></h3>
                    <div>
                        <p>
                            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus
                            pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque
                            semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
                            nisi, eu iaculis leo purus venenatis dui.
                        </p>
                    </div>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
                This sample demonstrates how to set the animation easing effect using the <b>animated</b>
                option.
            </p>
        </div>
    </div>
</body>
</html>
